<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no">
    <title>Title</title>
    <style>
        body,div,ul,ol,dl,li,dt,dd,p,h1,h2,h3,h4,h5,h6,tr,td,input,textarea{
        margin:0;
        padding:0;
        list-style:none;
            touch-action: none;
        }
    .header {
        width: 100%;
        height: 50px;
        background-color: #ccc;
    }
    .header li{
        float: left;
        font-size:20px;
        width: 50%;
        text-align: center;
        line-height:50px;
    }
    .current{
        color: red;
        border-bottom: 2px solid red;
    }
    .content{
        width: 200%;
        padding:20px;
    }
    .content>div{
        width: 50%;
        overflow: hidden;
        float: left;
    }
    .content li{
        line-height: 40px;
        border-bottom: 1px solid #000;
    }

    .more{
        text-align: center;
    }
    .more a{
       text-decoration: none;
        font-size:20px;
        color: #999;
    }

    </style>

</head>
<body>
    <div class="header">
        <ul>
            <li class="current">新闻</li>
            <li>科技</li>
        </ul>
    </div>
    <div class="content">
        <div class="list1">
            <ul>
                <li>新闻1111111新闻1111111</li>
                <li>新闻1111111新闻1111111</li>
                <li>新闻1111111新闻1111111</li>
                <li>新闻1111111新闻1111111</li>
                <li>新闻1111111新闻1111111</li>
                <li>新闻1111111新闻1111111</li>
            </ul>
        </div>
        <div class="list2">
            <ul>
                <li>新闻2222222新闻1111111</li>
                <li>新闻2222222新闻1111111</li>
                <li>新闻2222222新闻1111111</li>
                <li>新闻2222222新闻1111111</li>
                <li>新闻2222222新闻1111111</li>
                <li>新闻2222222新闻1111111</li>
            </ul>
        </div>
    </div>
    <div class="more">
        <a href="#">更多.....</a>
    </div>

<script src="js/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script>
    $(function () {
        $(".header li").tap(function () {
            var index = $(this).index();
            $(this).addClass('current').siblings().removeClass('current');
            $(".content>div").css({
                transform:"translateX("+(-index*100)+"%)",
                transition:"all 0.5s"
            })
        })


        /* 左右滑动*/
        $(".content").swipeRight(function () {
            swipe(0)
        });
        $(".content").swipeLeft(function () {
            swipe(1)
        });

        function swipe(index) {
                $(".header li").eq(index).addClass('current').siblings().removeClass('current');
                $(".content>div").css({
                    transform:"translateX("+(-index*100)+"%)",
                    transition:"all 0.5s"
                })

        }
    })
</script>
</body>
</html>